import { Tabs, Button, Collapse } from 'antd';
import React from 'react';
import { CaretRightOutlined } from '@ant-design/icons';
import { history, useLocation } from 'umi';
import Essential from "./component/essential"
import "./index.less"
const { TabPane } = Tabs;
const { Panel } = Collapse;
const list = [
    { title: "姓名", key: "1" },
    { title: "性别", key: "2" },
    { title: "图片", key: "3" },
    { title: "手机号", key: "4" },
    { title: "生日", key: "5" },
    { title: "QQ号", key: "6" },
    { title: "邮箱", key: "7" },
    { title: "学院", key: "8" },
    { title: "年级", key: "9" },
    { title: "班级", key: "10" },
    { title: "学号", key: "11" },
    { title: "特长", key: "12" },
    { title: "备注", key: "13" },
]
export default function index() {
    const { query: { record: { activityName, activityStatus, creator, timeDate, gmtCreated, key } } }: any = useLocation()
    const onChange = (e: any) => {
    }
    return (
        <div>
            <div className='detail'>
                <h1>详情</h1>
                <Tabs defaultActiveKey="1" onChange={onChange}>
                    <TabPane tab="基本信息" key="1">
                        <Essential></Essential>
                    </TabPane>
                    <TabPane tab="活动信息" key="2">
                        <div className='TabColl'>
                            <Collapse
                                bordered={false}
                                defaultActiveKey={['1']}
                                expandIcon={({ isActive }) => <CaretRightOutlined rotate={isActive ? 90 : 0} />}
                                className="site-collapse-custom-collapse"
                            >
                                <Panel header="报名" key="1" className="site-collapse-custom-panel">
                                    <div>
                                        <h1> <span></span> 基本信息</h1>
                                        <p>活动时间：{timeDate}</p>
                                        <p>报名人数：12</p>
                                    </div>
                                    <div>
                                        <h1> <span></span> 活动参加者填写信息</h1>
                                        <div className='btnList'>
                                            {list.map((ele: any) => (
                                                <Button key={ele.key}>{ele.title}</Button>
                                            ))}
                                        </div>
                                    </div>
                                    <div>
                                        <h1> <span></span> 补充项目</h1>
                                        <p>项目名称：{activityName}</p>
                                    </div>
                                </Panel>
                                <Panel header="投票" key="2" className="site-collapse-custom-panel">
                                    <div>
                                        <h1> <span></span> 基本信息</h1>
                                        <p>活动时间：{timeDate}</p>
                                        <p>投票方式：12</p>
                                    </div>
                                    <div>
                                        <h1> <span></span> 投票对象</h1>
                                        <div>
                                            <div className='vote'>
                                                <p>姓名：{creator}</p>
                                                <p>说明：测试活动信息</p>
                                            </div>
                                            <div>
                                                <p>图片：<img src="" alt="" /> </p>
                                            </div>
                                        </div>
                                    </div>
                                </Panel>
                                <Panel header="门票" key="3" className="site-collapse-custom-panel">
                                    <div>
                                        <h1> <span></span> 基本信息</h1>
                                        <p>活动时间：{timeDate}</p>
                                        <p>报名人数：12</p>
                                    </div>
                                    <div>
                                        <h1> <span></span> 活动参加者填写信息</h1>
                                        <div className='btnList'>
                                            {list.map((ele: any) => (
                                                <Button key={ele.key}>{ele.title}</Button>
                                            ))}
                                        </div>
                                    </div>
                                    <div>
                                        <h1> <span></span> 补充项目</h1>
                                        <p>项目名称：{activityName}</p>
                                    </div>
                                </Panel>
                                <Panel header="签到" key="4" className="site-collapse-custom-panel">
                                    <div>
                                        <h1> <span></span> 基本信息</h1>
                                        <p>活动时间：{timeDate}</p>
                                        <p>签到方式：12</p>
                                    </div>
                                </Panel>
                                <Panel header="抽奖" key="5" className="site-collapse-custom-panel">
                                    <div>
                                        <h1> <span></span> 基本信息</h1>
                                        <p>活动时间：{timeDate}</p>
                                        <p>签到方式：12</p>
                                        <p>兑奖规则：12</p>
                                    </div>
                                    <div>
                                        <h1> <span></span> 奖品设置(未中奖)</h1>
                                        <p>奖品总数：xxx</p>
                                    </div>
                                    <div>
                                        <h1> <span></span> 奖品设置(一等奖)</h1>
                                        <div>
                                            <div className='draw'>
                                                <p>奖品名称：xxx</p>
                                                <p>奖品总数：xxx</p>
                                                <p>中奖率(%)：100</p>
                                            </div>
                                            <div>
                                                <p>图片：<img src="" alt="" /> </p>
                                            </div>
                                        </div>
                                    </div>
                                </Panel>
                            </Collapse>
                        </div>
                    </TabPane>
                </Tabs>
            </div>
        </div>
    )
}
